<template>
	<kui-page ref="pageL" bgColor="#FFFFFF" :paddingX="0" :paddingY="0" :customHeader="false" :mode="data.mode">
		<template v-slot:body>
			<view class="
          kui-flex
          kui-flex-col
          kui-items-center
          kui-justify-center
          kui-pt-5
          kui-pb-5
        ">
				<kui-image src="/static/kviewui.png" :radius="10" width="440rpx" height="110rpx"></kui-image>
				<view class="kui-px-5 kui-mt-5">
					<kui-text :color="theme.colors['light']['grey'][6]">基于UNI-APP框架的多端开发UI组件库，让您的开发效率加倍提升</kui-text>
				</view>
			</view>
			<kui-container 
				:height="`${data.bodyHeight+2060}px`" 
				background-color="#F8F8F8" 
				top-left-radius="80rpx"
				top-right-radius="80rpx"
				:darken="0.83">
				<view class="kui-px-5 kui-absolute kui-top-0 kui-left-0  kui-w-full kui-rounded-t-4xl kui-bg-gray-100t" style="top: 360rpx;box-sizing: border-box;">
					<view class="kui-mt-6 kui-h-full kui-flex kui-items-center">
						<kui-text>暗黑模式：</kui-text>
						<kui-switch v-model="data.checked" @change="changeMode"></kui-switch>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="基础组件" type="space" :cell-title-weight="600" :cell-radius="100">
							<kui-cell title="Button 按钮" url="/pages/components/button/button" @taped="test">
							</kui-cell>
							<kui-cell title="Cell 单元格" url="/pages/components/cell/cell" @taped="test">
							</kui-cell>
							<kui-cell title="Image 图片" url="/pages/components/image/image" @taped="test">
							</kui-cell>
							<kui-cell title="Icon 图标" url="/pages/components/icon/icon"></kui-cell>
							<kui-cell title="Tag 标签" url="/pages/components/tag/tag"></kui-cell>
							<kui-cell title="Badge 徽标" url="/pages/components/badge/badge"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="布局组件" type="space" :cell-title-weight="600" :cell-radius="100">
							<kui-cell title="Layout 布局" url="/pages/components/layout/layout"></kui-cell>
							<kui-cell title="Grid 宫格" url="/pages/components/grid/grid"></kui-cell>
							<kui-cell title="Divider 分割线" url="/pages/components/divider/divider"></kui-cell>
							<kui-cell title="Space 间隔" url="/pages/components/space/space"></kui-cell>
							<kui-cell title="Sticky 粘性布局" url="/pages/components/sticky/sticky"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="展示组件" type="space" :cell-title-weight="600" :cell-radius="100">
							<kui-cell title="Spin 加载动画" url="/pages/components/spin/spin" @taped="test">
							</kui-cell>
							<kui-cell title="Overlay 遮罩" url="/pages/components/overlay/overlay"></kui-cell>
							<kui-cell title="Animation 动效" url="/pages/components/animation/animation"></kui-cell>
							<kui-cell title="Collapse 折叠面板" url="/pages/components/collapse/collapse"></kui-cell>
							<kui-cell title="Skeleton 骨架屏" url="/pages/components/skeleton/skeleton"></kui-cell>
							<kui-cell title="Progress 进度条" url="/pages/components/progress/progress"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="反馈组件" type="space" :cell-title-weight="600" :cell-radius="100">
							<kui-cell title="Popup 弹出层" url="/pages/components/popup/popup" @taped="test">
							</kui-cell>
							<kui-cell title="Snackbar 消息条" url="/pages/components/snackbar/snackbar"></kui-cell>
							<kui-cell title="Actionsheet 动作面板" url="/pages/components/actionsheet/actionsheet"></kui-cell>
							<kui-cell title="Dialog 对话框" url="/pages/components/dialog/dialog"></kui-cell>
							<kui-cell title="Toast 吐司" url="/pages/components/toast/toast"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="表单组件" type="space" :cell-title-weight="600" :cell-radius="100">
							<kui-cell title="Switch 开关" url="/pages/components/switch/switch"></kui-cell>
							<kui-cell title="Radio 单选按钮" url="/pages/components/radio/radio"></kui-cell>
						</kui-cell-group>
					</view>
					<view class="kui-mt-3">
						<kui-cell-group title="其他" type="space" :cell-title-weight="600" :cell-radius="100">
							<kui-cell title="ConfigProvider 全局配置" url="/pages/components/config-provider/config-provider"></kui-cell>
						</kui-cell-group>
					</view>
				</view>
				<view class="kui-mt-2"></view>
				
			</kui-container>
		</template>
		<!-- <kui-popup ref="popup"></kui-popup> -->
	</kui-page>
</template>

<script lang="ts">
	import {
		onLoad,
		onReady,
		onShow
	} from "@dcloudio/uni-app";

	import {
		reactive,
		provide,
		getCurrentInstance,
		nextTick
	} from "vue";
	
	import { TimeUtils } from '@/common/utils/datetime';

	export default {
		setup() {
			const {
				proxy
			} = getCurrentInstance();
			const theme = proxy.$theme;

			interface dataType {
				title ? : string;
				mode ? : string;
				accordion ? : boolean;
				popupShow ? : boolean;
			}

			const data: dataType = reactive({
				title: "Hello",
				mode: "light",
				accordion: false,
				popupShow: false,
				bodyHeight: '',
				checked: false
			});

			onReady(() => {
				const sysinfo = uni.getSystemInfoSync();
				data.bodyHeight = sysinfo.windowHeight - 143;
				console.log(data.bodyHeight);
				// console.log(new Date().getUTCDate());
				const D = new Date();
				const utcYear = D.getUTCFullYear();
				const utcMonth = D.getUTCMonth();
				const utcDate = D.getUTCDate();
				const utcHours = D.getUTCHours();
				const utcMinutes = D.getUTCMinutes();
				const utcSeconds = D.getUTCSeconds();
				const utcMilliseconds = D.getUTCMilliseconds();
				const y = utcYear;
				const m = utcMonth < 9 ? `0${utcMonth}` : utcMonth;
				const d = utcDate < 9 ? `0${utcDate}` : utcDate;
				const h = utcHours < 9 ? `0${utcHours}` : utcHours;
				const i = utcMinutes < 9 ? `0${utcMinutes}` : utcMinutes;
				const s = utcSeconds < 9 ? `0${utcSeconds}` : utcSeconds;
				const mi = utcMilliseconds;
				
				console.log(`${y}-${m}-${d}T${h}:${i}:${s}.${mi}+08:00`);
			});

			onLoad((option) => {
				console.log(
					uni.kviewUIColor.generate("#00BC79", {
						dark: true,
						list: false,
						index: 0,
					})
				);
			});

			// watch(()=>data.mode, (newVal) => {
			//   console.log(newVal);
			//   provide('changeMode', newVal);
			// })
			let isProvide = false;

			const changeMode = () => {
				data.mode = data.mode == "light" ? "dark" : "light";
				// provide("changeMode", data.mode);
				isProvide = true;
				uni.$emit("changeMode", data.mode);
			};

			const changeShade = () => {
				nextTick(() => {
					console.log(proxy.$refs["popup"].open());
				});
				// console.log(proxy.$refs.popup.open());
			};

			onShow(() => {
				if (isProvide) {
					provide("changeMode", data.mode);
				}
			});

			const changeMode1 = () => {
				data.accordion = !data.accordion;
			};

			const onTaped = () => {
				console.log(22222);
				uni.navigateTo({
					url: "/pages/theme/theme",
				});
			};

			const onChange = (e) => {
				console.log(e);
			};

			const test = () => {
				console.log('测试点击');
			}

			return {
				theme,
				data,
				changeMode,
				changeShade,
				changeMode1,
				onTaped,
				onChange,
				test
			};
		},
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
